<template>
  <el-row :gutter="15">
    <el-col :span="24">
      <el-card>
        <div slot="header" class="clearfix">
          <span>商家长期仓储</span>
        </div>
        <el-form ref="searchForm" class="el-form-col search-form" :model="search">
          <el-row :gutter="15">
            <el-col :lg="4" :md="6">
              <el-form-item  prop="cargoOwnerCode">
                <el-input v-model="search.cargoOwnerCode" placeholder="商家编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item  prop="cargoOwnerName">
                <el-input v-model="search.cargoOwnerName" placeholder="商家名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="cargoOwnerPrin">
                <el-input v-model="search.cargoOwnerPrin" placeholder="商家联系人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="cargoOwnerPhone">
                <el-input v-model="search.cargoOwnerPhone" placeholder="商家联系电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="12">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <!--<el-col :span="8">-->
                    <!--<el-button type="primary" plain @click="searchOpen = !searchOpen">{{ searchOpen ? '收起' : '展开' }}</el-button>-->
                  <!--</el-col>-->
                  <el-col :span="12">
                    <el-button @click="reset('searchForm')" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-col>

    <el-col :span="24">
      <BasicTable
        ref="BasicTable"
        url="/ms-warehouse-order/longOwner/findLongtimeStorage"
        :columns="columns"
      >
        <template slot="buttons">
          <el-button type="primary" @click="showDialogOpen()">开通长期仓储</el-button>
          <el-button type="danger" @click="showDialogRemove">移除商家</el-button>
        </template>
        <template slot="preColumn">
          <el-table-column prop="cargoOwnerCode" fixed="left" width="170px" align="center" label="商家编号">
            <template slot-scope="scope">
              <a href="javascript:;" class="blue-color" @click="show(scope.row)">{{ scope.row.cargoOwnerCode }}</a>
            </template>
          </el-table-column>
        </template>
        <template slot="column">
          <el-table-column fixed="right" width="130px" align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="show(scope.row)"
              ><span>查看</span></el-button>
              <el-button
                size="mini"
                type="text"
                @click="showDialogOpen(scope.row)"
              ><span>更改绑定仓库</span></el-button>
            </template>
          </el-table-column>
        </template>
      </BasicTable>
    </el-col>
    <!-- 开通长期仓储 -->
    <el-dialog
      :title="isUpdate ? '变更长期仓储':'开通长期仓储'"
      :visible.sync="dialogOpen"
      width="30%"
      center
    >
      <div style="text-align: center">
        <el-form class="el-form-col" :model="model" label-position="rigth" ref="elForm" label-width="200px">
          <el-form-item label="选择开通商家" label-width="120px" prop="cargoOwnerId" :rules="[
            {required: true, message: '商家必须', trigger: 'change'}
          ]">
            <el-select
              v-model="model.cargoOwnerId"
              filterable
              remote
              clearable
              reserve-keyword
              placeholder="请输入关键词"
              :disabled="isUpdate"
              :remote-method="remoteQuery"
              :loading="cargoOwnerLoading">
              <el-option
                v-for="item in cargoOwnerArr"
                :key="item.value"
                :label="item.text"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="isUpdate?'变更绑定仓库':'绑定仓库'" label-width="120px" prop="warehouseId" :rules="[
            {required: true, message: '仓库必须', trigger: 'change'}
          ]">
            <el-select
              v-model="model.warehouseId"
              remote
              clearable
              multiple>
              <el-option
                v-for="item in warehouseArr"
                :key="item.value"
                :label="item.text"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="openFunc" :loading="loading">添 加</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="移除长期仓储商家"
      :visible.sync="dialogRemove"
      width="500px"
      center
    >
      <div>
        <table class="table show-table" style="margin-bottom: 0px;">
          <tbody>
          <tr>
            <td width="120">移除商家：</td>
            <td width="76%">
              <div style="max-height: 150px;width: 100%; overflow: auto; overflow-x: hidden">
                <p v-for="(item, index) in cargoOwnerNameArr" :key="index">{{item}}</p>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="removeFunc" :loading="loading">确认移除</el-button>
      </span>
    </el-dialog>
  </el-row>
</template>
<script>
import {copy, arrayColumn, dotData} from '@/utils'
import {filterSecond, filterDataBaseDictionary, unixTimestampFilter} from '@/filters'
import L from 'lodash'
import {getWarehouse} from '@/utils/selectOptions'

export default {
  name: 'warehouseOwnerLongtermStorageIndex',
  components: {},
  filters: {
    filterSecond,
    filterDataBaseDictionary
  },
  data() {
    return {
      searchLoading: false,
      search: {
        cargoOwnerCode: '',
        cargoOwnerName: '',
        cargoOwnerPrin: '',
        cargoOwnerPhone: ''
      },
      searchOpen: false,
      cargoOwnerLoading: false,
      cargoOwnerIdArr: [],
      columns: [
        {label: '商家名称', data: 'cargoOwnerName'},
        {label: '绑定仓库', data: 'bindWarehouse'},
        {label: '商家联系人', data: 'cargoOwnerPrin'},
        {label: '联系电话', data: 'cargoOwnerPhone'},
        {label: '包件实际库存', data: 'libraryPackageNum'},
        {label: '包件可用库存', data: 'availablePackageNum'},
        {label: '包件冻结库存？', data: 'houseCity'},

        {
          label: '总体积(m³)',
          data: 'libraryPackageVolume'
        },
        {label: '总重量？', data: 'companyName'},
        {label: '开通人', data: 'founderName'},
        {
          label: '开通时间',
          data: 'foundtime',
          render(data, type, full, meta) {
            return unixTimestampFilter(data)
          }
        }
      ],
      model: {
        cargoOwnerId: '',
        warehouseId: []
      },
      dialogOpen: false,
      dialogRemove: false,
      cargoOwnerArr: [],
      warehouseArr: [],
      cargoOwnerNameArr: [],
      loading: false,
      isUpdate: false
    }
  },
  created() {
    getWarehouse().then(arr => {
      this.warehouseArr = arr || []
      if (this.warehouseArr.length === 1) {
        this.search.warehouseId = this.warehouseArr[0].value
      }
    })
  },
  methods: {
    show(data) {
      this.$router.push({path: '/ss-oms/warehouse/owner-longterm-storage/show/' + data.cargoOwnerId})
    },
    remoteMethod: L.debounce((query, _this) => {
      if (!query) {
        _this.cargoOwnerLoading = false
        return
      }
      _this.$ajax.get('/ms-warehouse-order/WhPackage/findCargoOwner', {cargoOwnerName: query}).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          let data = dotData(response, 'data')
          let tempArr = []
          if (Array.isArray(data)) {
            data.forEach((v, k) => {
              tempArr.push({
                text: v.cargoOwnerName,
                value: v.cargoOwnerId
              })
            })
          }
          _this.cargoOwnerArr = tempArr
          console.log(tempArr)
        }
      }).finally(_ => {
        _this.cargoOwnerLoading = false
      })
    }, 1000),
    remoteQuery(query) {
      this.cargoOwnerLoading = true
      this.remoteMethod(query, this)
    },
    showDialogOpen(data) {
      if (data) {
        this.model.cargoOwnerId = data.cargoOwnerId
        if (data.cargoOwnerId) {
          this.cargoOwnerArr = [{value: data.cargoOwnerId, text: data.cargoOwnerName}]
        }

        this.model.warehouseId = []
        this.isUpdate = true
      } else {
        this.model.cargoOwnerId = ''
        this.model.warehouseId = []
        this.cargoOwnerArr = []
        this.isUpdate = false
      }
      this.dialogOpen = true
    },
    openFunc() {
      this.loading = true
      this.$refs.elForm.validate(result => {
        if (!result) {
          this.loading = false
          return
        }
        this.$ajax.post('/ms-warehouse-order/longOwner/addLongtimeOwner', this.model).then(response => {
          const success = dotData(response, 'success')
          if (success) {
            this.loading = false
            this.$confirm('开通成功', '开通长期仓储商家', {
              type: 'success',
              center: true,
              confirmButtonText: '确定',
              showCancelButton: false,
              closeOnClickModal: false
            }).then(_ => {
              this.loading = false
              this.dialogOpen = false
              this.searchFunc()
            })
          } else {
            this.dialogOpen = false
            this.loading = false
          }
        }).catch(_ => {
          this.dialogOpen = false
          this.loading = false
          this.searchFunc()
        })
      })
    },
    showDialogRemove() {
      let selectedData = this.$refs.BasicTable.getSelected() || []
      console.log('selectedData', selectedData)
      if (!selectedData.length) {
        this.$alert('请选择移除商家！', '温馨提示', {
          type: 'warning',
          confirmButtonText: '确定',
          center: true
        })
        return
      }
      this.dialogRemove = true
      this.cargoOwnerIdArr = arrayColumn(selectedData, 'cargoOwnerId')
      this.cargoOwnerNameArr = arrayColumn(selectedData, 'cargoOwnerName')
    },
    removeFunc() {
      this.loading = true
      this.$ajax.post('/ms-warehouse-order/longOwner/delLongtimeOwner', this.cargoOwnerIdArr).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          this.loading = false
          this.$confirm('移除成功', '移除长期仓储商家', {
            type: 'success',
            center: true,
            confirmButtonText: '确定',
            showCancelButton: false,
            closeOnClickModal: false
          }).then(_ => {
            this.loading = false
            this.dialogRemove = false
            this.searchFunc()
          })
        } else {
          this.$confirm('<p>移除失败</p><p>(请确认所操作的商家库存为空)</p>', '移除长期仓储商家', {
            type: 'error',
            center: true,
            dangerouslyUseHTMLString: true,
            confirmButtonText: '确定',
            showCancelButton: false,
            closeOnClickModal: false
          }).then(_ => {
            this.loading = false
            this.dialogRemove = false
          })
        }
      }).catch(_ => {
        this.loading = false
        this.dialogRemove = false
        this.searchFunc()
      })
    },
    searchFunc() {
      const basicTable = this.$refs.BasicTable
      if (basicTable) {
        let params = copy(this.search)
        this.searchLoading = true
        basicTable.search(params).finally(_ => {
          this.searchLoading = false
        })
      }
    },
    // reset 重置搜索框
    reset(searchForm) {
      this.$refs.searchForm.resetFields()
    }
  }
}
</script>
